<template>
    <div>
        <h1>组合式api的生命周期</h1>
        <div id="box1">{{ msg }}</div>
        <input type="button" value="修改msg" @click="changeMsg">
        
        <router-link to="/Admin/Lifecycle_options">去选项式的生命周期</router-link>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

console.log("组合式：setup");
const msg = ref("hello vue");

function getData() {

    axios({

    })
        .then(res => {

        })
}

getData();

onBeforeMount(() => {
    console.log("onBeforeMount");
})


onMounted(() => {
    console.log("onMounted");
})


onBeforeUnmount(()=>{
    console.log("组合式api：销毁前：onBeforeUnmount");
})

</script>

<style lang="css" scoped></style>
